<docs>
  ## 代办个人社保信息变更服务记录
</docs>

<template>
  <div class="fixedBox" v-if="isShow">
    <v-header class="index" @back_btn="goBack()" title="代办个人社保信息变更服务详情"></v-header>
    <div class="dtBox cbxx" v-if="cbxx">
      <div class="shtop clearfix">
        <div class="result">
          <p
            class="resultp"
            v-show="cbxx.shzt"
            :style="{'width':cbxx.shzt == '初审通过，正在提交社保机构' ? '100%' : '50%'}"
          >
            <span class="label">审核状态：</span>
            <span
              :class="['spanp', cbxx.shzt == '未受理'? 'rightspan2' : cbxx.shzt == '修改成功' ? 'rightspan' : cbxx.shzt == '修改失败' || cbxx.shzt == '--' ? 'rightRed' : 'rightspan']"
            >{{cbxx.shzt}}</span>
          </p>
          <p class="resultp" v-show="cbxx.sqzt">
            <span class="label">申请状态：</span>
            <span :class="['spanp',cbxx.sqzt == '已取消'? 'rightRed' : 'rightspan']">{{cbxx.sqzt}}</span>
          </p>
          <p class="resultp" v-show="cbxx.xgczsj">
            <span class="label">变更时间：</span>
            <span class="spanp">{{cbxx.xgczsj}}</span>
          </p>
          <p class="resultp" v-show="cbxx.qxczsj">
            <span class="label">取消时间：</span>
            <span class="spanp">{{cbxx.qxczsj}}</span>
          </p>
        </div>
        <p class="cause" v-show="cbxx.shbtgyy">
          <span class="label">审核不通过原因：</span>
          <span class="spanp">{{cbxx.shbtgyy}}</span>
        </p>
        <p class="cause" v-show="cbxx.fkbcgyy">
          <span class="label">反馈不通过原因：</span>
          <span class="spanp">{{cbxx.fkbcgyy}}</span>
        </p>
      </div>
      <div class="shall">
        <div class="typebottom">
          <div class="zmxtype on">
            <p class="jigoup">
              联系地址：
              <span class="spanp">{{cbxx.xghlxdz}}</span>
            </p>
            <p class="jigoup">
              邮编：
              <span class="spanp">{{cbxx.xghyb}}</span>
            </p>
            <p class="jigoup">
              手机号码：
              <span class="spanp">{{cbxx.xghsjhm}}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="dtBox ddyy" v-if="ddyy">
      <div class="shtop clearfix">
        <div class="result">
          <p class="resultp" v-show="ddyy.sqzt == '已取消'">
            <span class="label">申请结果：</span>
            <span :class="['spanp',ddyy.sqzt == '正常' ? 'rightspan3' : 'rightspan2']">{{ddyy.sqzt}}</span>
          </p>
          <p
            class="resultp"
            v-show="ddyy.sqzt != '已取消'"
            :style="{'width':ddyy.shzt == '初审通过，正在提交社保机构' ? '100%' : '50%'}"
          >
            <span class="label">审核状态：</span>
            <span
              :class="['spanp',ddyy.shzt == '未受理' ? 'rightspan2' : ddyy.shzt == '修改失败' || ddyy.shzt == '--' ? 'rightRed' : ddyy.shzt == '修改成功' ? 'rightspan' : 'rightspan3']"
            >{{ddyy.shzt}}</span>
          </p>
          <p class="datap">
            <span class="label">变更操作时间：</span>
            <span class="spanp">{{ddyy.xgczsj}}</span>
          </p>
        </div>
        <p class="cause" v-show="ddyy.shbtgyy">
          <span class="label">审核不通过原因：</span>
          <span class="spanp">{{ddyy.shbtgyy}}</span>
        </p>
        <p class="cause" v-show="ddyy.fkbcgyy">
          <span class="label">反馈不通过原因：</span>
          <span class="spanp">{{ddyy.fkbcgyy}}</span>
        </p>
      </div>
      <div class="shall">
        <div class="typebottom">
          <div class="zmxtype on">
            <p class="jigoup">
              定点医疗机构1：
              <span class="spanp">{{ddyy.xghddyljg1}}</span>
            </p>
            <p class="jigoup">
              定点医疗机构1编码：
              <span class="spanp">{{ddyy.xghdmid1}}</span>
            </p>
            <p class="jigoup">
              定点医疗机构2：
              <span class="spanp">{{ddyy.xghddyljg2}}</span>
            </p>
            <p class="jigoup">
              定点医疗机构2编码：
              <span class="spanp">{{ddyy.xghdmid2}}</span>
            </p>
            <p class="jigoup">
              定点医疗机构3：
              <span class="spanp">{{ddyy.xghddyljg3}}</span>
            </p>
            <p class="jigoup">
              定点医疗机构3编码：
              <span class="spanp">{{ddyy.xghdmid3}}</span>
            </p>
            <p class="jigoup">
              定点医疗机构4：
              <span class="spanp">{{ddyy.xghddyljg4}}</span>
            </p>
            <p class="jigoup">
              定点医疗机构4编码：
              <span class="spanp">{{ddyy.xghdmid4}}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="dtBox jfyh" v-if="jfyh">
      <div class="shtop clearfix">
        <div class="result">
          <p class="resultp" v-show="jfyh.sqzt == '已取消'">
            <span class="label">申请结果：</span>
            <span
              :class="['spanp',jfyh.sqzt == '正常' ? 'rightspan3' : 'rightRed']"
            >{{jfyh.sqzt}}</span>
          </p>
          <p
            class="resultp on"
            v-show="jfyh.sqzt != '已取消'"
            :style="{'width':jfyh.shzt == '初审通过，正在提交社保机构' ? '100%' : '50%'}"
          >
            <span class="label">审核状态：</span>
            <span
              :class="['spanp',jfyh.shzt == '未受理' ? 'rightspan2' : jfyh.shzt == '修改失败' || jfyh.shzt == '--' ? 'rightRed' : jfyh.shzt == '修改成功' ? 'rightspan' : 'rightspan']"
            >{{jfyh.shzt}}</span>
          </p>
          <p class="datap">
            <span class="label">变更操作时间：</span>
            <span class="spanp">{{jfyh.xgczsj}}</span>
          </p>
        </div>
        <p class="cause" v-show="jfyh.shbtgyy">
          <span class="label">审核不通过原因：</span>
          <span class="spanp">{{jfyh.shbtgyy}}</span>
        </p>
        <p class="cause" v-show="jfyh.fkbcgyy">
          <span class="label">反馈不通过原因：</span>
          <span class="spanp">{{jfyh.fkbcgyy}}</span>
        </p>
      </div>
      <div class="shall">
        <div class="typebottom">
          <div class="zmxtype on">
            <p class="jigoup">
              银行卡号：
              <span class="spanp">{{jfyh.xghyhkh}}</span>
            </p>
            <p class="jigoup">
              缴费银行：
              <span class="spanp">{{jfyh.xghjfyh}}</span>
            </p>
            <p class="jigoup">上传资料：</p>
            <div class="imgList clearfix">
              <div class="imgItem left">
                <img class="J_sfzm" :src="urlPrefix+'/dafwgl/wjscxz/tpxs?tpid='+jfyh.kkxy_id" alt>
                <p>扣款协议</p>
              </div>
              <div class="imgItem right">
                <img :src="urlPrefix+'/dafwgl/wjscxz/tpxs?tpid='+jfyh.yhk_id" alt>
                <p>银行卡号</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Mheader from "@/ldry/group/mheader/mheader";
import $ from "@/common/js/axios";
export default {
  components: {
    "v-header": Mheader
  },
  name: "dbSearchDetail",
  data() {
    return {
      xgjlid: this.$route.query.xgjlid,
      cbxx: {}, //参保信息
      jfyh: {}, //缴费银行
      ddyy: {}, //定点医院
      urlPrefix:conf.urlPrefix,
      isShow:false
    };
  },
  created() {
    this.init();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    init() {
      var _this = this;
      this.$loading = true;
      $.post("/dafwgl/bxxxxg/xxxx", {
        xgjlid: this.xgjlid
      })
        .then(res => {
          let _res = res.returnData;
          if (+_res.executeResult == 1) {
            this.isShow = true;
            this.cbxx = _res.cbxx;
            this.ddyy = _res.ddyy;
            this.jfyh = _res.jfyh;
          } else {
            this.$alert({
              type: "warning",
              message: _res.message,
              cb: function(){
                _this.goBack();
              }
            });
            return false;
          }
        })
        .finally(() => {
          this.$loading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~common/scss/variable.scss";
.dtBox {
  width: 95%;
  margin: 0 auto;
  background: #ffffff;
  padding: 20px;
  border-radius: $radius-base2;
  box-sizing: border-box;
}
.shtop {
  padding: 20px 0;
  border-bottom: 1px solid #cccccc;
  p {
    padding: 15px 0;
    font-size: $font-size-base;
  }
}
.shall {
  margin: 20px 0;
  .jigoup {
    color: #999999;
    padding: 20px 0;
    font-size: $font-size-base;
  }
}

.leftp {
  float: left;
  padding: 15px 20px 0 10px;
}
.spancolor {
  color: $color-base;
  float: right;
  margin-right: 20px;
}
.imgList{
  width: 90%;
  height: 360px;
  margin: 0 auto;
  margin-top:20px;
  .imgItem{
    width: 40%;
    height: 100%;
    text-align: center;
    img{
      display: inline-block;
      height: 80%;
    }
    p{
      display: block;
      color: $color-base;
      padding: 10px 0;
    }
  }
}
</style>
